<!-- 质检单 -->
<template>
    <div id="change">
        <div class="change-top">
            单据日期&nbsp;
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" size="small" style="width: 150px;"
                v-model="quality.createDate" type="date" placeholder="选择日期">
            </el-date-picker>
            &nbsp;&nbsp;业务员
            <el-select v-model="quality.employeeId" size="small" style="width: 150px;margin-right: 20px;">
                <el-option v-for="em, index in emList" :key="index" :label="em.employeeName"
                    :value="em.employeeId"></el-option>
            </el-select>
            &nbsp;采购单号&nbsp;
            <el-input v-model="quality.purchaseCode" placeholder="采购单号" style="width: 150px;" size="small">
            </el-input>
            &nbsp;&nbsp;销售退货单号&nbsp;
            <el-input v-model="quality.salesReturnCode" placeholder="销售退货单号" style="width: 150px;" size="small">
            </el-input>
            <br>
            供应商
            <el-input v-model="quality.providerId" placeholder="供应商" style="width: 150px;" size="small">
            </el-input>
            &nbsp;&nbsp;质检结果
            <el-select v-model="quality.result" size="small" style="width: 150px;margin-right: 20px;">
                <el-option label="通过" :value="1"></el-option>
                <el-option label="未通过" :value="0"></el-option>
            </el-select>
            <el-button size="small" @click="saveAddQuality">保存</el-button>
            <el-button size="small" type="primary">导入</el-button>
            <el-button size="small" type="primary">导出</el-button>
            <el-button size="small" type="success">审核</el-button>
            <!-- <PublicLink /> -->
            <span>单据编号：<el-input v-model="quality.qualityCode" size="small" style="width: 120px;"></el-input><i
                    class="el-icon-edit"></i></span>
        </div>
        <div class=" change-content">
            <el-table @row-click="handlerClick" :row-style="{ height: '55px' }" show-summary
                :summary-method="getSummaries" height="440px" :data="quality.details" border
                style="width: 100%;font-size: 13px;">
                <el-table-column>
                    <el-button size="mini" @click="addRow"><i class="el-icon-circle-plus-outline"></i></el-button>
                    <el-button size="mini" @click="reduceRow"><i class="el-icon-remove-outline"></i></el-button>
                </el-table-column>
                <el-table-column prop="goodcode" label="商品编号" width="240">
                    <template slot-scope="scope">
                        <el-input style="width: 150px;" size="small" v-model="scope.row.goodcode"></el-input>
                        <el-button @click="goodsShow = true" size="small"><i class="el-icon-more"></i></el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="goodname" label="商品名称" width="150">
                </el-table-column>
                <el-table-column prop="num" label="商品批次号" width="150">
                    <template slot-scope="scope">
                        <el-input size="small" v-model="scope.row.goodNumber"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="categoryName" label="商品类别" width="120">
                </el-table-column>
                <el-table-column prop="brandName" label="品牌" width="120">
                </el-table-column>
                <el-table-column prop="unitname" label="单位" width="120">
                </el-table-column>
                <el-table-column prop="num" label="质检数量" width="120">
                    <template slot-scope="scope">
                        <el-input size="small" v-model="scope.row.totalNum"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="num" label="通过数量" width="120">
                    <template slot-scope="scope">
                        <el-input size="small" v-model="scope.row.passedNum"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="detailRemark" label="备注" width="160">
                    <template slot-scope="scope">
                        <el-input size="small" v-model="scope.row.detailRemark"></el-input>

                    </template>
                </el-table-column>
            </el-table>
            <el-input type="textarea" v-model="quality.remark" placeholder="备注"></el-input>
            <el-button style="position: relative;right: -1200px;" @click="goto('quality')">历史单据</el-button>
        </div>
        <el-dialog top="20px" title="选择商品" :visible.sync="goodsShow">
            <GoodsChoose ref="chooseGoods" :goodsShow="goodsShow" />
            <div slot="footer" class="dialog-footer">
                <el-button @click="goodsShow = false">取 消</el-button>
                <el-button type="primary" @click="yesGoods">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import GoodsChoose from '../public_com/GoodsChoose.vue';
// import PublicButton from '../public_com/PublicButton.vue';
import PublicLink from '../public_com/PublicLink.vue';

export default {
    name: 'AddQuality',
    components: {
        PublicLink,
        // PublicButton,
        GoodsChoose
    },
    data() {
        return {
            activeName: 'first',
            goodsShow: false,
            value: '',
            input: '',
            quality: {
                createDate: '',
                employeeId: '',
                providerId: '',
                remark: '',
                qualityCode: '',
                purchaseCode: '',
                salesReturnCode: '',
                result: '',
                details:
                    [
                        {
                            detailId: '',
                            goodcode: "",
                            goodname: '',
                            totalNum: '',
                            passedNum: '',
                            unitname: '',
                            brandName: '',
                            categoryName: '',
                            detailRemark: '',
                        }
                    ]
            },

            storeList: [],
            emList: []
        }
    },
    methods: {
        goto(to) {
            this.$router.push(to)
        },
        addRow() {
            this.quality.details.push(
                {
                    goodcode: '',
                    goodname: '',
                    totalNum: '',
                    passedNum: '',
                    unitname: '',
                    brandName: '',
                    categoryName: '',
                    detailRemark: '',
                }
            )
        },
        reduceRow() {
            if (this.quality.details.length > 1) {
                this.quality.details.pop()
            }
        },
        yesGoods() {
            this.goodsShow = false
            // this.goodsList = 
            // console.log(this.goodsList)
            //遍历商品列表
            var detailList = this.$refs.chooseGoods.selectionList
            var indexs = []
            //删除表格中空白的行
            this.quality.details.forEach((detail, index) => {
                if (detail.goodcode == '') {
                    indexs.push(index)
                    console.log(index)
                }
            })
            indexs.reverse().forEach((index, i) => {
                console.log(index)
                this.quality.details.splice(index, 1)
            })
            detailList.forEach((item, index) => {
                this.quality.details.push(
                    {
                        goodcode: item.goodcode,
                        goodname: item.goodname,
                        totalNum: '',
                        passedNum: '',
                        unitname: item.unitname,
                        brandName: item.brandName,
                        categoryName: item.categoryName,
                        detailRemark: '',
                    }
                )
            })
        },
        successMessage(msg) {
            this.$message({
                message: msg,
                type: 'success'
            });
        },
        errorMessage(msg) {
            this.$message({
                message: msg
                ,
                type: 'error'
            })
        },
        getEmployees() {
            this.axios.get('/info/employee/listAll').then(rs => {
                this.emList = rs.data.list
            })
        },
        saveAddQuality() {
            this.axios.post('/store/quality/addQuality',
                this.quality
            ).then(rs => {
                if (rs.data.code == 200) {
                    this.successMessage("添加成功")
                } else {
                    this.errorMessage("添加出错了")
                }
            })
        }
    },
    created() {
        this.getEmployees()
    }

}
</script>

<style scoped lang="less">
#change {
    width: 100%;
    height: 100%;
}

.change-top {
    width: calc(100% -20px);
    height: 130px;
    /* background-color: pink; */
    line-height: 60px;
    padding-left: 20px;
    font-size: 13px;
}

.change-content {
    width: 100%;
    height: calc(100% - 100px);
    /* background-color: skyblue; */
}

.el-input,
.el-button {
    font-size: 13px;
}

/* 合计行整体样式修改开始 */
.el-table /deep/ .el-table__footer-wrapper tbody td {
    background-color: #fff1d4;
}

.el-table /deep/ .el-table__body tr:hover>td {
    background-color: #fff1d4;
}

td.el-table__cell .el-button {
    width: 40px;
    margin-left: 0px;
}

/deep/ .el-tabs__header {
    margin: 0 !important;
}
</style>